<template>
  <view class="game-container">
    <!-- 游戏场景画布 -->
    <canvas 
      id="gameCanvas"
      type="webgl"
      class="game-canvas"
      @touchstart="onTouchStart"
      @touchmove="onTouchMove"
      @touchend="onTouchEnd"
    ></canvas>

    <!-- 游戏UI层 -->
    <view class="game-ui">
      <view class="player-info">
        <text class="player-name">{{currentPlayer}}</text>
        <text class="turn-time">{{countdown}}秒</text>
      </view>
      <achievement-notify ref="achievementNotify" />
    </view>
  </view>
</template>

<script>
import { initGameScene } from '@/common/game-scene'
import { watchGameState } from '@/services/game'
import { checkAchievements } from '@/services/achievement'
import AchievementNotify from '@/components/achievement-notify'

export default {
  components: {
    AchievementNotify
  },
  data() {
    return {
      currentPlayer: '',
      countdown: 0,
      scene: null,
      achievementNotify: null
    }
  },
  mounted() {
    this.initScene()
    this.watchGame()
  },
  methods: {
    initScene() {
      const canvas = document.getElementById('gameCanvas')
      this.scene = initGameScene(canvas, {
        cameraAngle: 30, // 30度视角
        terrainType: 'grassland'
      })
    },
    watchGame() {
      watchGameState(async (state) => {
        this.currentPlayer = state.currentPlayer
        this.countdown = state.countdown
        this.scene.updateState(state)
        
        // 检查成就解锁
        if (state.gameEnded) {
          const unlocked = await checkAchievements(state)
          if (unlocked.length > 0) {
            this.$refs.achievementNotify.achievement = unlocked[0]
            this.$refs.achievementNotify.show()
          }
        }
      })
    },
    onTouchStart(e) {
      // 触摸开始处理
    },
    onTouchMove(e) {
      // 触摸移动处理  
    },
    onTouchEnd(e) {
      // 触摸结束处理
    }
  }
}
</script>

<style>
.game-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.game-canvas {
  width: 100%;
  height: 100%;
}

.game-ui {
  position: absolute;
  top: 20rpx;
  left: 0;
  right: 0;
  padding: 20rpx;
}

.player-info {
  background: rgba(0,0,0,0.5);
  border-radius: 10rpx;
  padding: 10rpx 20rpx;
  color: white;
  display: flex;
  justify-content: space-between;
}
</style>
